<template>
    <div>
        <!--查询条件-->
        <div class="searchBox">
            <Form label-position="left" :label-width="100" class="search-form">
                <Row :gutter="16">
                    <Col span="5">
                        <FormItem :label="`${$t('maintenance.EquipmentNo')}:`" >
                            <Input type="text" v-model="searchParams.deviceMId" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                        </FormItem>
                    </Col>
                    <Col span="5">
                         <FormItem :label="`${$t('ledger.RelocationType')}:`">
                            <Select v-model="searchParams.ydlx" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of changesList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem :label="`${$t('ledger.TransactOutFactory')}:`">
                            <Select v-model="searchParams.oldBelongCompanyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem :label="`${$t('ledger.TransactInFactory')}:`">
                            <Select v-model="searchParams.newBelongCompanyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4" align="center">
                        <Button type="primary" @click="changeNum()">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
            <span  class="creatBtnright" @click="handleOutRecords" v-if="checkBtnPermission.dmsMoveApplyExportMove">
                <span><Icon type="ios-cloud-download-outline"/></span>
                <span class="rightbtn">{{$t('common.ExportChangeReport')}}</span>
            </span>
        </div>
        <div class="tableContent">
            <Table
                    style="margin-top: 10px"
                    row-key="id"
                    :columns="stageColumns"
                    :data="dataSource"
                    @on-selection-change="handleSelectionChange"
            >
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
    </div>
</template>

<script>
    import fileDownload from 'js-file-download'
    export default {
        name: "updateList",
        data() {
            return {
                total: this.stageTotal,
                pageNum: 1,
                pageSize: 10,
                delLoading: false,
                searchParams: {
                    deviceMId: this.deviceMId
                },
                checkBtnPermission: {},
                pageSizeOption: [10, 20, 30],
                changesList: [{id: 0, name: '全部'}, {id: 1, name: '转售'}, {id: 2, name: '调拨'}, {id: 3,name: '租用'}, {id: 4, name: '借用'}, {id: 7, name: '借用归还'}, {id: 5, name: '仅记录'},{id: 6, name: '委外生产借用'}],
                stageColumns: [
                    {
                        title: '异动类型',
                        key: 'ydlx',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', params.row.ydlx == 1 ? '转售' : params.row.ydlx == 2 ? '调拨' : params.row.ydlx == 3 ? '租用' : params.row.ydlx == 4 ? '借用' : params.row.ydlx == 5 ? '仅记录' : params.row.ydlx == 6 ? '委外生产借用' : '借用归还')
                        }
                    },
                    {
                        title: '异动单号',
                        key: 'applyNo',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: '调出设备管理员',
                        key: 'moveOutAdminName',
                        align: 'center',
                        minWidth: 120,
                    },
                    {
                        title: '调入设备管理员',
                        key: 'moveInAdminName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '更新日期',
                        key: 'updateTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '固定资产编号',
                        key: 'assetsNo',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'specification',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '调出工厂名称',
                        key: 'oldBelongCompanyName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '调入工厂名称',
                        key: 'newBelongCompanyName',
                        align: 'center',
                        minWidth: 120
                    },
                    // {
                    //     title: '调出成本中心',
                    //     key: 'moveOutCostCenterName',
                    //     align: 'center',
                    //     minWidth: 120
                    // },
                    // {
                    //     title: '调入成本中心',
                    //     key: 'moveInCostCenterName',
                    //     align: 'center',
                    //     minWidth: 120
                    // },
                    {
                        title: '调出功能位置',
                        key: 'oldOrgName',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '调入功能位置',
                        key: 'newOrgName',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '实际功能位置',
                        key: 'newOrgName',
                        align: 'center',
                        minWidth: 200
                    },
                ],
                dataSource: this.stageDataSource,
            }
        },
        props: {
            deviceMId: {
                type: String,
                default: () => ''
            },
            factoryList: {
                type: Array,
                default: () => []
            },
            orgList: {
                type: Array,
                default: () => []
            },
            stageDataSource: {
                type: Array,
                default: () => []
            },
            stageTotal: {
                type: Number,
                default: () => 10
            }
        },
        watch: {
            stageDataSource(newValue) {
                this.dataSource = newValue
            },
            stageTotal(newValue) {
                this.total = newValue
            },
        },
        created() {
            this.searchList()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="dmsMoveApplyExportMove"){
                    this.checkBtnPermission.dmsMoveApplyExportMove = true
                }
            }
        },
        methods: {
            handleSelectionChange() {},
            //导出
            handleOutRecords() {
                let params = {};
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }
                }
                const filName = '台账更新记录'
                this.axios({
                    method: 'get',
                    url: '/dms/dmsMoveApply/exportMove',
                    responseType: 'blob',
                    params
                }).then(res => {
                    fileDownload(res, filName + '.xlsx')
                })
            },
            //分页
            changeNum() {
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val) {
                this.pageNum = val;
                this.searchList();
            },
            searchList() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const {length, last = length - 1} = arr
                        this.$set(params, key, arr[last])
                    } else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.axios({
                    method: 'get',
                    url: '/dms/dmsMoveApply/getDeviceTzMoveSpList',
                    params: params
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.dataSource = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
